<template>
  <div style="font-size: 14px;">
    <div id="login">
      <div class="login-head">
        <div class="login-logo">
          <img src="../assets/img/logo.png" class="xdLogo0" style="animation-play-state: running; animation-iteration-count: 4;">
        </div>
        <h1 class="login-title">{{modalType === 'login'?'账号登录':'账号注册'}}</h1>
      </div>
      <div class="login-main">
        <div class="login-info" v-show="modalType === 'login'">
          <div class="login-msg">
            <input type="text" placeholder="请输入账号" v-model="loginForm.username" @focus="clearTip">
          </div>
          <div class="login-msg">
            <input type="password" placeholder="请输入密码" v-model="loginForm.password" @focus="clearTip">
          </div>
        </div>

        <div class="login-info" v-show="modalType === 'register'">
          <div class="login-msg">
            <input type="text" placeholder="请输入账号" v-model="registerForm.username" @focus="clearTip">
          </div>
          <div class="login-msg">
            <input type="password" placeholder="请输入密码" v-model="registerForm.password" @focus="clearTip">
          </div>
          <div class="login-msg">
            <input type="password" placeholder="请确认密码" v-model="registerForm.confirmPassword" @focus="clearTip">
          </div>
        </div>

        <div class="warning" v-if="showTip">
          <img src="../assets/img/warn.png">
          <p>{{tip}}</p>
        </div>
        <div class="login-btn">
          <div v-if="modalType === 'login'">
            <van-button  @click="handleLogin" color="linear-gradient(to right, #ff6034, #ee0a24)" style="width: 100%;">
              登录
            </van-button>
            <p class="other">
              <span @click="changeModalType('register')">没有账号？去注册 &gt;</span>
            </p>
          </div>

          <div v-if="modalType === 'register'">
            <van-button  @click="handleRegister" color="linear-gradient(to right, #ff6034, #ee0a24)" style="width: 100%;">
              注册
            </van-button>
            <p class="other">
              <span @click="changeModalType('login')">已有账号？去登录 &gt;</span>
            </p>
          </div>

        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {getStore,setStore} from "@/store/store.js";
  import { setToken } from '@/store/auth';
  import { Button } from 'vant';
  export default {
    components: {
      [Button.name]: Button
    },

    data() {
      return {
        modalType: 'login',
        defaultAvatar: require('../assets/img/avatar.jpg'),//注册默认头像
        loginForm: {
          username:'',//用户名
          password: "",//密码
        },
        registerForm: {
          username:'',//用户名
          password: "",//密码
          confirmPassword: "",//确认密码
        },
        userInfo:{},
        userList:[],//全部用户列表
        showTip: false,//验证提示
        tip: ''//提示语
      };
    },

    mounted() {
      this.$store.commit('SET_HEADER_FOOTER', {showSearchHeader: true,headerName:'登录',pageName:'login',showFooter: false});
    },
    
    methods: {
      goBack(){//返回
        this.$router.go(-1)
      },
      clearTip(){
        this.showTip = false;
        this.tip = '';
      },
      resetForm(){//重置
        this.loginForm = {
          username:'',
          password: ""
        };
        this.registerForm = {
          username:'',
          password: "",
          confirmPassword: ""
        };
        this.showTip = false;
        this.tip = '';
      },
      changeModalType(type){//切换登录、注册
        this.modalType = type;
        this.resetForm();
        if(this.modalType === 'register'){
          this.$store.commit('SET_HEADER_FOOTER', {showSearchHeader: true,headerName:'注册',pageName:'login',showFooter: false});
        }else{
          this.$store.commit('SET_HEADER_FOOTER', {showSearchHeader: true,headerName:'登录',pageName:'login',showFooter: false});
        }
      },
      handleLogin() {//登录
        let that = this;
        that.tip = '';
        that.showTip = false;
        that.userInfo = {};
        if(that.loginForm.username.trim() === ''){
          that.tip = '账号名不能为空';
          that.showTip = true;
          return;
        }
        if(that.loginForm.password.trim() === ''){
          that.tip = '密码不能为空';
          that.showTip = true;
          return;
        }
        //获取所有用户
        let userList = getStore({name:'userList'});
        if(userList){
          that.userList = userList;
          let hadUser = false;//循环拼单是否存在用户
          that.userList.forEach((item,index)=>{
            if(item.username === that.loginForm.username && item.password === that.loginForm.password){
              hadUser = true;
              that.userInfo = item;
              //模拟登录用户 存到缓存
              that.$store.commit('SET_USER_INFO', that.userInfo);
              //设置登录token
              setToken(that.userInfo.id);
              this.$toast.success('登录成功');
              that.$router.push({'path':'/user'});
            }else if(index === (that.userList.length - 1) && !hadUser){
              that.$toast.fail('账号或密码错误');
            }
          });
        }else{
          that.$toast.fail('账号或密码错误');
        }
      },
      handleRegister() {//注册
        let that = this;
        that.tip = '';
        that.showTip = false;
        if(that.registerForm.username.trim() === ''){
          that.tip = '账号名不能为空';
          that.showTip = true;
          return;
        }
        if(that.registerForm.password.trim() === ''){
          that.tip = '密码不能为空';
          that.showTip = true;
          return;
        }
        if(that.registerForm.confirmPassword.trim() === ''){
          that.tip = '确认密码不能为空';
          that.showTip = true;
          return;
        }
        if(that.registerForm.password.trim() !== that.registerForm.confirmPassword.trim()){
          that.tip = '两次输入密码不一致';
          that.showTip = true;
          return;
        }
        //获取所有用户
        that.userList = getStore({name:'userList'});
        if(!that.userList){
          that.userList = [];
        }
        let pass = true;
        if(that.userList.length === 0){
          that.checkUseRegister();
        }else{
          that.userList.forEach((item,index)=>{
            if(pass){
              if(item.username === that.registerForm.username){
                that.$toast.fail('用户名已存在，请修改');
                pass = false;
              }
            }
            if(pass && index === (this.userList.length-1)){
              that.checkUseRegister();
            }
          });
        }
      },
      checkUseRegister(){//注册
        //模拟注册用户 存到缓存
        let id = this.userList?(this.userList.length + 1):1;//递增id
        let userInfo = {
          id: id,
          username: this.registerForm.username,
          phone: this.registerForm.phone,
          password: this.registerForm.password,
          avatar: this.defaultAvatar
        };
        this.userList.push(userInfo);
        //用户列表 - 存储到缓存
        setStore({name:'userList',content: this.userList});
        this.$toast.success('注册成功，请登录');
        this.modalType = 'login';
      }
    }
  };
</script>

<style scoped>
  #nav-header {
    width: 100%;
    height: 3rem;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
  }
  a {
    text-decoration: none;
    color: #000;
  }
  #nav-header img {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0 1rem;
  }
  #nav-header h1 {
    font-size: 1.2rem;
  }
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 400;
  }

  .login-head {
    width: 100vw;
    height: 30vw;
    padding-top: 10vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .login-logo {
    position: relative;
  }
  .login-logo img {
    display: block;
    width: 3.2rem;
    height: 3.2rem;
  }
  .xdLogo0 {
    position: relative;
    z-index: 1;
    -webkit-animation: xdLogo 3s ease-in-out 2s 3 alternate both;
    animation: xdLogo 3s ease-in-out 2s 3 alternate both;
  }
  .login-logo img {
    display: block;
    width: 3.2rem;
    height: 3.2rem;
  }
  .xdLogo1 {
    position: absolute;
    left: 0;
    top: 0;
  }
  .login-title {
    font-size: 1.2rem;
    padding: 0.5rem;
    color: #696969;
  }
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 400;
  }
  .login-main {
    margin: 0 6vw;
  }
  .login-msg input {
    width: 88vw;
    border: none;
    border-bottom: 0.05rem solid #bfbfbf;
    outline: none;
    font-size: 1.2rem;
    padding: 4vw 0;
  }
  .warning {
    margin: 4vw 0 -5vw 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .warning img {
    display: block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
  }
  .login-btn {
    justify-content: space-between;
    align-items: center;
    margin: 10vw 0;
  }
  .login-btn a:first-child {
    border: 0.05rem solid #bfbfbf;
    color: #696969;
  }
  .login-btn a {
    width: 37vw;
    font-size: 1.2rem;
    text-align: center;
    border-radius: 2vw;
    padding: 2vw;
  }
  .login-btn a:last-child {
    background: #ff6700;
    color: #fff;
    border: 0.05rem solid #ff6700;
  }
  .login-btn a {
    width: 37vw;
    font-size: 1.2rem;
    text-align: center;
    border-radius: 2vw;
    padding: 2vw;
  }

  .tips {
    position: fixed;
    z-index: 10;
    width: 42vw;
    height: 32vw;
    left: 29vw;
    top: calc(50vh - 16vw);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 3vw;
    background: rgba(0,0,0,.6);
  }
  .tips-img {
    display: block;
    width: 3rem;
    height: 3rem;
    padding: 0.3rem;
  }
  .tips-content {
    color: #fff;
  }
  li, p, ul {
    margin: 0;
  }
  .warning p {
    color: #f66;
    font-size: .9rem;
  }
  .other{
    text-align: right;
    font-size: 14px;
    line-height: 30px;
    color:#666;
    cursor: pointer;
  }
</style>
